<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" href="./iconfont/iconfont.css">
	</head>
	<body>
		<div class="card">
			<div class="imgbox">
				<img src="img/pic1.jpg" >
			</div>
			<h1>Animation films</h1>
			<div class="card-title">
				<i class="iconfont icon-map" style="color: #999999;"></i>
				<span>3D Animations</span>
			</div>
			<div class="card-content">
				sada sdfsa fdsad wdsavdsve scsdecf dsfdsf dbsaub!
			</div>
			<hr >
			<div class="card-foot clearfix">
				<i class="iconfont icon-star" style="color: #55A532;"></i>
				<i class="iconfont icon-star" style="color: #55A532;"></i>
				<i class="iconfont icon-star" style="color: #999999;"></i>
				<i class="iconfont icon-star" style="color: #999999;"></i>
				<i class="iconfont icon-facebookfacebook52" style="color: #999999;"></i>
			</div>
		</div>
	</body>
</html>
<style type="text/css">
	body{
		background-color: #f2f2f2;
	}
	img{
		width: 200px;
		height: auto;
	}
	h1{
		color: #666666;
		font-size: 20px;
		margin: 5px 10px;
	}
	hr{
		color: #999999;
		margin: 0 10px;
	}
	.card{
		width: 200px;
/* 		border: 1px solid; */
		background-color: #fff;
		box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
		margin: 50px auto;
	}
	.card-title{
		color: #999999;
		font-size: 16px;
		margin: 5px 10px;
	}
	.card-content{
		margin: 10px 10px 10px 10px;
		width: 180px;
		color: #999999;
		white-space:normal;
		word-break:break-all;
		word-wrap:break-word; 
	}
	.icon-star{
		float: left;
		margin: 10px -15px 10px 20px;
	}
	.icon-facebookfacebook52{
		float: right;
		margin: 10px 20px 10px 0;
	}
	.clearfix::before,.clearfix::after{
		content: '';
		display: table;
		clear: both;
	}
</style>